<template>
	<div class="auto-scroll-compontent" :style="{width,height}" ref="component">
		<div class="auto-scroll-outer" ref="frame" :class="[dir==='vertical'?'vertical-outer':'horizontal-outer']" >
			<div class="auto-scroll-wrapper" ref="wrapper"
				:class="[dir==='vertical'?'vertical-wrapper':'horizontal-wrapper']" 
			>
				<div class="origin-view" ref="content"><slot></slot></div>
				<div class="repeat-view" v-if="needScroll"><slot></slot></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { uuid,eleResize } from '@/assets/js/utils'
const props = defineProps({
	dir:{
		type:String,
		default:'vertical'  /* 方向值：水平-horizontal 竖-vertical */
	},
	width:{
		type:String,
		default:'100%'
	},
	height:{
		type:String,
		default:'100%'
	},
	stepSpeed:{
		type:Number,
		default:500  /* 移动速度，单位 ms/100px */
	}
})
const {dir,stepSpeed} = toRefs(props)

const instance = getCurrentInstance()
const needScroll = ref(false)
let $frame = null;

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame =  instance.refs.frame;
	eleResize.on($frame, drawAnimate);
}

const drawAnimate = function(){
	const $component =  instance.refs.component;
	let $style = $component.getElementsByTagName('style')
	if ($style.length!=0) {
		destoryAnimate($style)
	}
	createCssAnimate($component)
}

const createCssAnimate = function($component){
	if (dir.value === 'vertical') {
		let oh = instance.refs.frame.offsetHeight;
		let wh = instance.refs.content.offsetHeight;
		let diffHeight = wh - oh;
		if (diffHeight>0){
			let animateTime = diffHeight/100*stepSpeed.value
			let animateName = 'auto_scroll_animate_' + uuid()
			let animateCss = '.auto-scroll-animate{animation:'+animateName+' '+animateTime+'ms linear infinite;}'
			animateCss += ' @keyframes ' + animateName + ' { from { top:0px; } to { top:'+ (-wh) +'px; } }';
			let $style = document.createElement('style')
			$style.type = 'text/css'
			$style.innerHTML = animateCss
			$component.appendChild($style)
			instance.refs.wrapper.classList.add("auto-scroll-animate")
			needScroll.value = true
		} 
	} else {
		let ow = instance.refs.frame.offsetWidth;
		let ww = instance.refs.content.offsetWidth;
		let diffWidth = ww - ow;
		if (diffWidth>0){
			let animateTime = diffWidth/100*stepSpeed.value
			let animateName = 'auto_scroll_animate_' + uuid()
			let animateCss = '.auto-scroll-animate{animation:'+animateName+' '+animateTime+'ms linear infinite;}'
			animateCss += ' @keyframes ' + animateName + ' { from { margin-left:0px; } to { margin-left:'+ (-ww) +'px; } }';
			let $style = document.createElement('style')
			$style.type = 'text/css'
			$style.innerHTML = animateCss
			$component.appendChild($style)
			instance.refs.wrapper.classList.add("auto-scroll-animate")
			needScroll.value = true
		} 
	}
}

const destoryAnimate = function($style){
	if (!$style) {
		const $component =  instance.refs.component;
		$style = $component.getElementsByTagName('style')
	}
	if ($style.length>0){
		$style = $style[0]
		$style.remove()
		instance.refs.wrapper.classList.remove("auto-scroll-animate")
		needScroll.value = false
	}
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, eleListener);
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	createEleResize()
	drawAnimate()
})

onBeforeUnmount(()=>{
	destroyEleResize();
})
</script>

<style scoped lang="scss">
.auto-scroll-compontent{
	.auto-scroll-outer{
		overflow: hidden;
		width: 100%;
		height: 100%;
		&.vertical-outer{
			position: relative;
		}
		&.horizontal-outer{
			
		}
	}
	.auto-scroll-wrapper{
		top:0px;
		margin-left: 0px;
		&.vertical-wrapper{
			position: absolute;
			width: 100%;
			height: auto;
		}
		&.horizontal-wrapper{
			display: flex;
			width: 100%;
			height: 100%;
			.origin-view,.repeat-view{
				display: flex;
				height: 100%;
			}
		}
	}
}
</style>
<style lang="scss">
.auto-scroll-compontent{
	.auto-scroll-wrapper{
		&.horizontal-wrapper{
			&>*{
				flex-shrink: 0;
			}
		}
	}
}
</style>